<template>
	<view class="wap">
		<navbar :parameter='parameter'></navbar>
		<view class="form-back"></view>
		<view class="form-box" :style="{'top':navHeight+'rpx'}">
			<view class="progress-box acea-row row-between-wrapper">
				<block v-for="(item,index) in progress_list" :key="index">
					<view class="progress-item">
						<view class="active" v-if="index == active"><text class="iconfont icon-duihao2"></text>
						</view>
						<view class="index" v-else>{{index+1}}</view>
						<view class="title">{{item}}</view>
					</view>
					<view class="line" v-if="(index+1) !== progress_list.length "></view>
				</block>
			</view>
			<view class="box name-box acea-row row-between-wrapper" style="padding: 30rpx;">
				<view class="">
					<text class="iconfont icon-fenlei"></text>服务类型
				</view>
				<view class="">家庭陪护</view>
			</view>
			<view class="box form">
				<navigator class="line acea-row picker" url="/pages/user/patient_management?isChoice=0">
					<view class="tit"> 选择就诊人 </view>
					<input type="text" v-model="patient.member_name" placeholder="请选择就诊人" placeholder-class="psc"
						disabled>
				</navigator>
				<view class="line acea-row picker" @click="hospital_picker_show = true">
					<view class="tit"> 家庭住址 </view>
					<picker @change="bindPickerChange" :value="index" mode=region>
						<view class="uni-input" :class="list.city == ''?'psc':''">
							{{list.city == ''?'请选择家庭住址':list.city}}
						</view>
					</picker>
				</view>
				<view class="line acea-row">
					<view class="tit"> 具体地址 </view>
					<input type="text" v-model="list.address" placeholder="请填写具体地址" placeholder-class="psc">
				</view>
				<view class="line acea-row picker" @click="selfcare_ability_show = true">
					<view class="tit"> 自理能力 </view>
					<input type="text" v-model="list.selfcare_ability" placeholder="请选择自理能力" placeholder-class="psc"
						disabled>
				</view>
				<view class="line acea-row picker">
					<view class="tit"> 服务时间 </view>
					<input type="text" v-model="list.selected_date" placeholder="请选择就服务时间" placeholder-class="psc"
						disabled />
				</view>
				<view class="line acea-row">
					<view class="tit"> 服务天数 </view>
					<input type="text" v-model="list.service_days" placeholder="请填写服务天数" placeholder-class="psc">
				</view>
				<view class="line acea-row">
					<view class="tit"> 联系电话 </view>
					<input type="text" v-model="list.receive_mobile" placeholder="请填写联系电话" placeholder-class="psc">
				</view>
				<view class="line acea-row">
					<view class="tit"> 服务需求 </view>
					<textarea v-model="list.remark" placeholder="请填写服务需求" placeholder-class="psc"></textarea>
				</view>
			</view>
			<zysx></zysx>
		</view>
		<view class="bottom-box">
			<ysxy @radioCheck="radioCheck"></ysxy>
			<view class="btn-box">
				<view class="btn" @click="submit"> 立即下单￥{{list.price}} </view>
			</view>
		</view>


		<!-- 自理能力 -->
		<u-action-sheet :actions="selfcare_ability_list" description="自理能力" :show="selfcare_ability_show"
			closeOnClickAction="true" cancelText="取消" @select="selfcare_ability_confirm"
			@close="selfcare_ability_show = false"></u-action-sheet>


		<!-- 提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	let app = getApp();
	const d = new Date()
	const year = d.getFullYear();
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '家庭陪护',
					'color': false,
				},
				navHeight: app.globalData.navHeight,
				progress_list: ['填写订单', '在线支付', '在线支付', '服务完成', ],

				// 自理能力
				selfcare_ability_show: false,
				selfcare_ability_list: [{
						name: '自理'
					},
					{
						name: '半自理'
					}
				],

				isRead: false,
				hospital_name: '', //回显
				patient: '',
				department_name: '',
				list: {
					type: 9,
					service_id: '',
					hospital_id: '',
					staff_id: '',
					member_id: '',
					receive_mobile: '',
					selected_date: '',
					remark: '',
					selfcare_ability: '',
					address: '',
					service_days: '',
					city: '',
				},
				active: 0,
			};
		},
		onLoad(option) {
			this.list.staff_id = uni.getStorageSync('staff_id');
			this.hospital_name = uni.getStorageSync('hospital_name');
			var hospital_id = uni.getStorageSync('hospital_id');
			this.list.hospital_id = hospital_id;
			this.list.selected_date = `${year}-${option.date}`;
			this.list.service_id = option.service_id;
			this.list.price = option.total_price;
		},
		onShow() {
			uni.$once('patient', (patient) => {
				this.patient = patient.patient;
				console.log("就诊人", this.patient);
				this.list.member_id = patient.patient.id;
			});
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {

		},
		onShareTimeline(res) { //分享到朋友圈

		},
		methods: {
			async createOrder() {
				this.list.openid = uni.getStorageSync('openid')
				const res = await this.$myRequest({
					url: '/api/order/createOrder',
					data: this.list,
				})
				console.log("生成订单", res.data.data);
				var order_id = res.data.data.order_id;
				var service_name = res.data.data.service_name;
				if (res.data.status == 200) {
					uni.navigateTo({
						url: '/pages/user/payment?order_id=' + order_id + '&service_name=' + service_name +
							'&price=' + this.list.price
					})
				}
			},
			// 自理能力
			selfcare_ability_confirm(e) {
				console.log('confirm', e)
				this.list.selfcare_ability = e.name;
				this.selfcare_ability_show = false
			},

			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.list.city = e.detail.value[0] + e.detail.value[1] + e.detail.value[2]
			},
			radioCheck() {
				this.isRead = true;
			},
			submit() {
				if (!this.isRead) {
					this.$refs.uToast.show({
						type: 'error',
						message: '请阅读协议并同意'
					})
				} else {
					this.createOrder();
					console.log(this.list)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wap {
		position: relative;
		padding: 0;
	}

	.form-back {
		width: 100%;
		height: 210rpx;
		background: linear-gradient(135deg, #689FFF, #347DFE);
	}

	.form-box {
		position: absolute;
		width: 100%;
		left: 0;
		padding: 0 30rpx;
		padding-bottom: 300rpx;
	}

	.box {
		width: 100%;
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
	}

	.name-box {
		color: #000;
		font-size: 28rpx;
	}

	.name-box .iconfont {
		color: #347DFE;
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.progress-box {
		padding: 30rpx 10rpx;
		color: #fff;
	}

	.progress-box .progress-item {
		text-align: center;
	}

	.progress-box .progress-item .active {
		width: 53rpx;
		height: 53rpx;
		background-color: #fff;
		border-radius: 50%;
		margin: 0 auto;
	}

	.progress-box .progress-item .active .iconfont {
		color: #FE8802;
		font-size: 53rpx;
	}

	.progress-box .progress-item .index {
		width: 53rpx;
		height: 53rpx;
		border: 1px solid #FFFFFF;
		border-radius: 50%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
	}

	.progress-box .progress-item .title {
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.progress-box .line {
		width: 70rpx;
		height: 1px;
		background: #F5F6F8;
		margin-top: -40rpx;
	}

	.form .line {
		font-size: 28rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #D9D9DA;

	}

	.form .line:last-child {
		border-bottom: none;
	}

	.form .line .tit {
		color: #000;
		width: 140rpx;
		text-align-last: justify;
	}

	.form .line input,
	.form .line picker {
		color: #000;
		flex: 1;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
	}

	.form .line.picker {
		padding-right: 30rpx;
		position: relative;
	}

	.form .line.picker::after {
		content: "\e61f";
		font-family: "iconfont";
		display: block;
		position: absolute;
		font-size: 24rpx;
		color: #b4b4b4;
		top: 0;
		right: 0rpx;
		line-height: 100rpx;
	}

	.form .line textarea {
		width: 100%;
		height: 130rpx;
		border: 1px solid #D9D9DA;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		line-height: 1.4;
	}


	.attention .title {
		height: 100rpx;
		line-height: 100rpx;
	}

	.attention .cont {
		color: #E33434;
		font-size: 28rpx;
		padding-bottom: 30rpx;
	}

	.bottom-box {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #fff;
		padding: 30rpx 30rpx 0 30rpx;
		height: 224rpx;
		z-index: 10;
		box-shadow: 3px -6px 9px 0px rgba(172, 196, 255, 0.13);

	}

	.radio-line {
		font-size: 20rpx;
		color: #B0B0B0;
	}

	.radio-line navigator {
		color: #347DFE;
	}

	.btn-box {
		padding-top: 40rpx;
	}

	.btn-box .btn {
		width: 100%;
		height: 80rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: #347DFE;
		color: #fff;
		font-size: 32rpx;
	}
</style>
